
<!--登陆界面-->

<template >
  <div class="login">
    <div class="login-container" >
        <el-form
            :model="loginForm"
            :rules="loginRules"
            ref="loginForm"
            label-width="80px"
            class="login-form"
        >
          <h2>某某医院招标系统登录</h2>

          <!-- 用户名输入框 -->
          <el-form-item label="" prop="username" style="margin-left: -20px">
            <i class="el-icon-user" style="margin-left: -30px; font-size: 20px;"></i>
            <el-input v-model="loginForm.username" placeholder="请输入用户名" style="width: 200px; margin-left: 10px"></el-input>

          </el-form-item>

          <!-- 密码输入框 -->
          <el-form-item label="" prop="password" style="margin-left: -20px">
            <i class="el-icon-lock" style="margin-left: -30px; font-size: 20px;"></i>
            <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" show-password style="width: 200px; margin-left: 10px"></el-input>
          </el-form-item>

          <!-- 登录按钮 -->
          <el-form-item>
            <el-button type="primary" @click="handleLogin" style="width: 90px;margin-left: -20px">登录</el-button>
            <el-button type="warning" @click="$router.push('/enroll')" style="width: 90px;margin-left: 20px">企业注册</el-button>
          </el-form-item>
        </el-form>
    </div>

  </div>
</template>

<script>
import { login } from '@/api/user.js'
import {setRoutes} from "@/router";

export default {
  name: "Login",
  data() {
    return {
      loginUser: '',
      loginForm: {
        username: '',
        password: '',
      },
      loginRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
    };
  },
  methods: {
    handleLogin() {
      this.$refs['loginForm'].validate((valid) => {
        if (valid) { //表单校验 通过
          login(this.loginForm).then(res => {
            if(res) {
              if(res.status==1){
                localStorage.setItem('user', JSON.stringify(res)) //存储用户信息到前端
                localStorage.setItem('menus', JSON.stringify(res.menus)) //存储用户信息到前端

                // 动态设置路由
                setRoutes()
                if(res.roleId == 1) {this.$router.push('/bossmanhome')}
                if(res.roleId == 2) {this.$router.push('/purchprojobli')}
                if(res.roleId == 3) {this.$router.push('/suppliershome')}
                if(res.roleId == 4) {this.$router.push('/bossmanhome')}
              }else if(res.status==0){
                this.$message.error('账户已被锁定')
              }
            }else {
              this.$message.error('用户名或密码错误')
            }
          })
        }else {
          return false
        }
      });
    },

  },
}
</script>

<style scoped>
.login {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #333;
  overflow: hidden;
}
.login-container {
  width: 600px;
  margin: 120px auto;
  padding: 60px;
  border: 20px solid #dcdcdc;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

h2 {
  text-align: center;
  margin-bottom: 30px;
}

.login-form {
  max-width: 300px;
  margin: 0 auto;
}

.el-input {
  width: 100%;
}

.el-button {
  width: 100%;
}
</style>